<form id="loginForm" method="post" class="needs-validation" novalidate>
    {% csrf_token %}

    {% if next %}
        <input type="hidden" name="next" value="{{ next }}"/>
    {% endif %}

    {% load widget_tweaks %}
    <div class="form-group">
        <label for="{{ form.username.id_for_label }}">{{ form.username.label }}</label>
        {{ form.username|add_class:'form-control'|attr:'placeholder:Enter your Email' }}
    </div>

    <div class="form-group">
        <a href="{% url 'password_reset' %}" class="text-muted float-right"><small>Forgot your
            password?</small></a>
        <label for="{{ form.password.id_for_label }}">{{ form.password.label }}</label>
        <div class="input-group input-group-merge">
            {{ form.password|add_class:'form-control'|attr:'placeholder:Enter your password' }}
            <div class="input-group-append" data-password="false">
                <div class="input-group-text">
                    <span class="password-eye"></span>
                </div>
            </div>
        </div>
    </div>

    {% if form.errors %}
        {% for field in form %}
            {% for error in field.errors %}
                <div class="alert alert-danger">
                    <strong>{{ error|escape }}</strong>
                </div>
            {% endfor %}
        {% endfor %}
        {% for error in form.non_field_errors %}
            <div class="alert alert-danger">
                <strong>{{ error|escape }}</strong>
            </div>
        {% endfor %}
    {% endif %}

    <div class="form-group mb-3">
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="checkbox-signin" checked>
            <label class="custom-control-label" for="checkbox-signin">Remember me</label>
        </div>
    </div>

    <div class="form-group mb-0 text-center">
        <button class="btn btn-primary" type="submit"> Log In</button>
    </div>

    <!-- Social -->
    <div class="text-center mt-4">
        <p class="text-muted font-16">Sign in with</p>
        <ul class="social-list list-inline mt-3">
            <li class="list-inline-item">
                <a href="javascript: void(0);" class="social-list-item border-primary text-primary"><i
                        class="mdi mdi-facebook"></i></a>
            </li>
            <li class="list-inline-item">
                <a href="javascript: void(0);" class="social-list-item border-danger text-danger"><i
                        class="mdi mdi-google"></i></a>
            </li>
            <li class="list-inline-item">
                <a href="javascript: void(0);" class="social-list-item border-info text-info"><i
                        class="mdi mdi-twitter"></i></a>
            </li>
            <li class="list-inline-item">
                <a href="javascript: void(0);" class="social-list-item border-secondary text-secondary"><i
                        class="mdi mdi-github-circle"></i></a>
            </li>
        </ul>
    </div>
</form>
